import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  // 存放数据的地方
  state: {
    msg: "hello",
  },
  // 存放突变的地方，修改state数据的函数
  mutations: {
    // key: value
    //    key - 突变的名字
    //    value(state, payload)   突变对应的处理函数
    //          state 是当前仓库store的state数据
    //          payload 提交这个突变时，传递过来的参数
    changeMsg(state, payload) {
      state.msg = payload;
    },
  },
  // 存放动作的地方，存放，提交 mutation 的函数
  actions: {
    // key: value
    //    key      动作的名字
    //    value(context, payload)    动作对应的处理函数
    //          context 是当前仓库store的上下文对象，理解为这玩意里面有 state、commit、dispatch、...
    //              == $store state、rootState、getters、rootGetters、commit、dispath
    //          payload 派发这个动作时，传递过来的参数
    abc(context, payload) {
      // 要修改 state 的数据，需要 提交突变
      context.commit("changeMsg", "张三"); // this.$store.commit()
    },

    def({ state, commit }) {
      // context 直接解构出来
    },
  },
});
